<!--
  ~ Copyright (c) 2018 Nam Nguyen, nam@ene.im
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~        http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<html class="qp-ui" data-qp-ui="{'Futurizr': {'hasTouch': 'touch'}}" data-qp-ui-data-id="qp:0">

<head>
    <meta charset="utf-8">
    <link href="../static/default/css/main.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Roboto+Mono:400|Material+Icons"
          rel="stylesheet">
    <meta name="viewport" content="initial-scale=1, width=device-width">
    <title>Material motion - Motion - Material Design</title>
    <meta itemprop="name" content="Material motion - Motion - Material Design">
    <meta property="og:type" content="article">
    <meta property="og:title" content="Material motion - Motion - Material Design">
    <meta itemprop="image" content="https://storage.googleapis.com/material-design/publish/material_v_10/share.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:title" content="Material motion - Motion - Material Design">
    <meta property="og:site_name" content="Material Design">
    <meta property="og:image" content="https://storage.googleapis.com/material-design/publish/material_v_10/share.png">
    <meta property="article:section" content="Material motion - Motion - Material Design">
    <meta name="theme-color" content="#8E24AA">
    <link rel="icon" sizes="192x192" href="https://storage.googleapis.com/material-design/publish/material_v_10/guidelines-icon-192x192.png">
    <link rel="shortcut icon" href="https://storage.googleapis.com/material-design/publish/material_v_10/guidelines-icon-72x72.png">
    <link rel="apple-touch-icon" href="https://storage.googleapis.com/material-design/publish/material_v_10/guidelines-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="72x72" href="https://storage.googleapis.com/material-design/publish/material_v_10/guidelines-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="144x144" href="https://storage.googleapis.com/material-design/publish/material_v_10/guidelines-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="180x180" href="https://storage.googleapis.com/material-design/publish/material_v_10/guidelines-icon-180x180.png">
    <meta name="msapplication-TileImage" content="https://storage.googleapis.com/material-design/publish/material_v_10/guidelines-icon-144x144.png">
    <meta name="msapplication-tap-highlight" content="no">

</head>

<body class="site-material_ext_publish section-material-design first-chapter color-purple qp-ui qp-ui-mask" data-qp-ui="{ 'Mask': {} }"
      data-qp-ui-data-id="qp:1">

<!-- Google Tag Manager -->
<noscript>&lt;iframe src="//www.googletagmanager.com/ns.html?id="
    height="0" width="0" style="display:none;visibility:hidden"&gt;&lt;/iframe&gt;</noscript>
<script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>
<script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-NHRPF8"></script>
<script>
    (function(w, d, s, l, i) {
      w[l] = w[l] || [];
      w[l].push({
        'gtm.start': new Date().getTime(),
        event: 'gtm.js'
      });
      var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s),
        dl = l != 'dataLayer' ? '&l=' + l : '';
      j.async = true;
      j.src =
        '//www.googletagmanager.com/gtm.js?id=' + i + dl;
      f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-NHRPF8');
  </script>
<!-- End Google Tag Manager -->

<header class="qp-ui qp-ui-peekaboo" data-qp-ui="{'Peekaboo': {'mobile': 72,'desktop-sm': 72,'default': 192}}"
        data-qp-ui-data-id="qp:2">
    <div class="header-wrapper qp-ui qp-ui-peekaboo" data-qp-ui="{'Peekaboo': {'mobile': 28,'desktop-sm': 28,'default': 82}}"
         data-qp-ui-data-id="qp:3" style="">
        <div class="header-title">
            <span class="section-title">Motion</span>
            <span class="chapter-title">
          <span class="title-separator">–</span> Material motion
        </span>
        </div>
    </div>
    <div class="header-wrapper qp-ui qp-ui-peekaboo-placeholder" data-qp-ui="{'Peekaboo': {'mobile': 28,'desktop-sm': 28,'default': 82}}"
         aria-hidden="true" style="">
        <div class="header-title">
            <span class="section-title">Motion</span>
            <span class="chapter-title">
          <span class="title-separator">–</span> Material motion
        </span>
        </div>
    </div>
</header>
<header class="qp-ui qp-ui-peekaboo-placeholder" data-qp-ui="{'Peekaboo': {'mobile': 72,'desktop-sm': 72,'default': 192}}"
        aria-hidden="true">
    <div class="header-wrapper qp-ui" data-qp-ui="{'Peekaboo': {'mobile': 28,'desktop-sm': 28,'default': 82}}" style="">
        <div class="header-title">
            <span class="section-title">Motion</span>
            <span class="chapter-title">
          <span class="title-separator">–</span> Material motion
        </span>
        </div>
    </div>
</header>

<div id="grid-cont">
    <section class="grid_outer chapter">

        <h1 class="chapter-title">Material motion

        </h1>
        <div class="chapter-content">

            <div class="article-content chapter-intro">
                <div>
                    <h1>Motion in the world of Material Design is used to describe spatial relationships, functionality, and
                        intention with beauty and fluidity.</h1>
                    <div class="col-list">
                        <section class="figure col-1">
                            <div class="figure">
                                <figure class="s-tag-media">
                                    <div class="media" style="max-width: 1520px">
                                        <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                             style="padding-top: 56.1842105263%" aria-label="Play video" data-qp-ui-data-id="qp:h">
                                            <video loop="" preload="auto" tabindex="0">
                                                <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01VDAtSVF3X0F5VTg/materialmotionhero-spec-0505.webm" type="video/webm">
                                                <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01SWc0N29QR3pZT2s/materialmotionhero-spec-0505.mp4" type="video/mp4">
                                            </video>
                                        </div>
                                    </div>
                                </figure>
                            </div>
                        </section>

                        <div id="material-motion-why-does-motion-matter" class="article qp-ui" data-qp-ui="{ 'ScrollSpy': {} }" data-qp-ui-data-id="qp:1">
                            <h2 class="article-title qp-ui" data-qp-ui="{ 'ResponsiveZippy': {} }" data-qp-ui-data-id="qp:1">
                                Why does motion matter?
                            </h2>
                            <div class="article-content">
                                <div>
                                    <p>Motion shows how an app is organized and what it can do. </p>
                                    <p>Motion provides: </p>
                                    <ul class="lst-kix_so1jjix4kui4-0 start">
                                        <li>Guided focus between views</li>
                                        <li>Hints at what will happen if a user completes a gesture</li>
                                        <li>Hierarchical and spatial relationships between elements</li>
                                        <li>Distraction from what’s happening behind the scenes (like fetching content or loading the next
                                            view)
                                        </li>
                                        <li>Character, polish, and delight</li>
                                    </ul>
                                    <div class="modulettes">
                                        <a class="modulette container gd" href="https://design.google.com/articles/making-motion-meaningful/" target="_blank">
                                            <!--<img alt="" class="icon callout-icon" src="../static/spec/images/callouts/gd.svg">-->
                                            <div class="info">
                                                <div class="title">Making Motion Meaningful</div>
                                                <p class="subtitle">Motion designers from around Google share some of their most moving product features.</p>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="article-list">

                <div id="material-motion-how-does-material-move" class="article qp-ui" data-qp-ui="{ 'ScrollSpy': {} }" data-qp-ui-data-id="qp:2">
                    <h2 class="article-title qp-ui" data-qp-ui="{ 'ResponsiveZippy': {} }" data-qp-ui-data-id="qp:2">
                        How does material move?

                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon icon-expand-collapse" role="img" viewBox="0 0 10 10"
                             aria-labelledby="title desc">
                            <title>Expand and collapse content</title>
                            <desc>An arrow that points down when collapsed and points up when expanded.</desc>
                            <polygon role="presentation" points="2.5,4.167 5,6.667 7.5,4.167 6.917,3.583 5,5.5 3.083,3.583"></polygon>
                        </svg>
                    </h2>
                    <div class="article-content">
                        <div>
                            <p>The material environment draws inspiration from real-world forces, such as gravity and friction.
                                These forces are reflected in the way user input affects elements on screen and how elements
                                react to each other.</p>
                            <p>Material in motion has the following characteristics:</p>
                            <div class="col-list">
                                <section class="module-figure col-2 h2-spacing">
                                    <div class="module">
                                        <h2>Responsive</h2>
                                        <p>Material is full of energy. It quickly responds to user input precisely where the user triggers
                                            it.
                                        </p>
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media">
                                                <div class="qp-ui qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     aria-label="Play video" data-qp-ui-data-id="qp:i">
                                                    <video aria-describedby="how-does-material-move-figure-caption-0" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01dG5OVlFUTVFySTg/responsive-01-durations-v1.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01a05pM2FXWEN0b0U/responsive-01-durations-v1.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="how-does-material-move-figure-caption-0">
                                                <p>Larger animations on mobile devices are 300-400ms long. Smaller animations can be as
                                                    short as 150-200ms. Animations longer or shorter than these can feel sluggish or difficult
                                                    to follow.
                                                </p>
                                                <p>See more in <a href="../motion/duration-easing.html#duration-easing-common-durations">Common Durations</a>.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                </section>
                                <section class="module-figure-figure col-3">
                                    <div class="module">
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 720px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse qp-ui-video-player-hover" data-qp-ui="{ 'VideoPlayer': {} }"
                                                     role="button" style="padding-top: 100.0%" aria-label="Play video" data-qp-ui-data-id="qp:j">
                                                    <video aria-describedby="how-does-material-move-figure-caption-1" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01aGFDUmZwNG1sTTQ/responsive-02-feedback-v2.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01YVB4OXVzV3NQR3M/responsive-02-feedback-v2.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="how-does-material-move-figure-caption-1">
                                                <p>Ink ripples confirm user input by immediately expanding outward from the point of touch.
                                                    The card lifts to indicate an active state.</p>
                                                <p>See more in <a href="../motion/choreography.html#choreography-radial-reaction">Radial reaction</a>.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 720px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     style="padding-top: 100.0%" aria-label="Play video" data-qp-ui-data-id="qp:k">
                                                    <video aria-describedby="how-does-material-move-figure-caption-2" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01RkRSNjBMbGU2UHM/responsive-03-surfaceconnection-v3.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01MkJzdEZuY0E5YXM/responsive-03-surfaceconnection-v3.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="how-does-material-move-figure-caption-2">
                                                <p>Show the connection between new surfaces and the element or action that creates them.</p>
                                                <p>See more in <a href="../motion/choreography.html#choreography-creation">Creation</a>.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                </section>
                            </div>
                            <div class="col-list">
                                <section class="module-figure col-2 h2-spacing">
                                    <div class="module">
                                        <h2>Natural</h2>
                                        <p>Material depicts natural movement inspired by forces in the real world.</p>
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media">
                                                <div class="qp-ui qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     aria-label="Play video" data-qp-ui-data-id="qp:l">
                                                    <video aria-describedby="how-does-material-move-figure-caption-3" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01ZDVubnRMcENfcnM/natural-01-easing-v1.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01aWFoSHhFRVRpZW8/natural-01-easing-v1.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="how-does-material-move-figure-caption-3">
                                                <p>In the real world, an element’s ability to speed up or slow down quickly is affected
                                                    by weight and surface friction. In a similar way, starts and stops do not occur instantaneously
                                                    in material design.</p>
                                                <p>See more in <a href="../motion/duration-easing.html#duration-easing-natural-easing-curves">Natural easing curves</a>.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                </section>
                                <section class="module-figure-figure col-3">
                                    <div class="module">
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 720px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     style="padding-top: 100.0%" aria-label="Play video" data-qp-ui-data-id="qp:m">
                                                    <video aria-describedby="how-does-material-move-figure-caption-4" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01eUt4Umt0dHVfblU/natural-02-arc-v3.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01SktIam0yei0wSnM/natural-02-arc-v3.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="how-does-material-move-figure-caption-4">
                                                <p>Real-world forces, like gravity, inspire an element’s movement along an arc rather than
                                                    in a straight line.</p>
                                                <p>See more in <a href="../motion/movement.html#movement-movement-within-screen-bounds">Movement</a>.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 720px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     style="padding-top: 100.0%" aria-label="Play video" data-qp-ui-data-id="qp:n">
                                                    <video aria-describedby="how-does-material-move-figure-caption-5" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01b0VCclNJdV9xZmM/natural-03-transform-v3.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01bzJOUXhfTTVZY28/natural-03-transform-v3.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="how-does-material-move-figure-caption-5">
                                                <p>Material transformations follow an arc of movement.</p>
                                                <p>See more in <a href="../motion/transforming-material.html">Transforming material</a>.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                </section>
                            </div>
                            <div class="col-list">
                                <section class="module-figure-figure col-3 h2-spacing">
                                    <div class="module">
                                        <h2>Aware</h2>
                                        <p>Material is aware of its surroundings, including the user and other material around it. It
                                            can be attracted to elements and respond appropriately to user intent.</p>
                                        <p>See more in <a href="../motion/choreography.html">Choreography</a>.</p>
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 720px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     style="padding-top: 100.0%" aria-label="Play video" data-qp-ui-data-id="qp:o">
                                                    <video aria-describedby="how-does-material-move-figure-caption-6" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01TkJIam1HM0VsdEU/aware-01-choreo-v2.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01TFFreDdlSVp3dGc/aware-01-choreo-v2.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="how-does-material-move-figure-caption-6">
                                                <p>As elements transition into view, they and their surroundings are choreographed in a
                                                    way that defines their relationships.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 720px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     style="padding-top: 100.0%" aria-label="Play video" data-qp-ui-data-id="qp:p">
                                                    <video aria-describedby="how-does-material-move-figure-caption-7" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01QVYxZ3NITnJfUjA/aware-02-moveaway-v2.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01RFdjQWE4ZXBseWM/aware-02-moveaway-v2.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="how-does-material-move-figure-caption-7">
                                                <p>Material can push other material out of the way.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                </section>
                                <section class="module-figure-module col-3">
                                    <div class="module">
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 720px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     style="padding-top: 100.0%" aria-label="Play video" data-qp-ui-data-id="qp:q">
                                                    <video aria-describedby="how-does-material-move-figure-caption-8" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01RHpoUVJ2UEk0cWc/aware-03-magnets-v2.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01YXR3cjNJeUdRNG8/aware-03-magnets-v2.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="how-does-material-move-figure-caption-8">
                                                <p>Elements may attract other elements and join with them as they approach one another.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="module">
                                    </div>
                                </section>
                            </div>
                            <div class="col-list">
                                <section class="module-figure-figure col-3 h2-spacing">
                                    <div class="module">
                                        <h2>Intentional</h2>
                                        <p>Material in motion guides focus to the right spot at the right time.
                                        </p>
                                        <p>See more in <a href="../motion/choreography.html#choreography-continuity">Continuity</a>.</p>
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 720px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     style="padding-top: 100.0%" aria-label="Play video" data-qp-ui-data-id="qp:r">
                                                    <video aria-describedby="how-does-material-move-figure-caption-9" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01YmV5SERQVU0wQjQ/intentional-01-focus-v3.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01SDNmSjRhbE9FNVU/intentional-01-focus-v3.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="how-does-material-move-figure-caption-9">
                                                <p>A transition helps guide the user to the next step of an interaction.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 720px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     style="padding-top: 100.0%" aria-label="Play video" data-qp-ui-data-id="qp:s">
                                                    <video aria-describedby="how-does-material-move-figure-caption-10" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01SjhfQzB4QmI1WUk/intentional-03-disabled-v2.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01RF9qdXlyMC1ETDA/intentional-03-disabled-v2.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="how-does-material-move-figure-caption-10">
                                                <p>Movement can communicate different signals, such as whether an action is unavailable.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                </section>
                                <section class="module-figure-module col-3">
                                    <div class="module">
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 720px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     style="padding-top: 100.0%" aria-label="Play video" data-qp-ui-data-id="qp:t">
                                                    <video aria-describedby="how-does-material-move-figure-caption-11" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01Y09iZVJNcktPalE/intentional-02-ring-v3.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01akJiWVBnT3Bkc1U/intentional-02-ring-v3.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="how-does-material-move-figure-caption-11">
                                                <p>Animation can bring focus to elements that need user attention.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="module">
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="material-motion-what-makes-a-good-transition" class="article qp-ui" data-qp-ui="{ 'ScrollSpy': {} }" data-qp-ui-data-id="qp:3">
                    <h2 class="article-title qp-ui" data-qp-ui="{ 'ResponsiveZippy': {} }" data-qp-ui-data-id="qp:3">
                        What makes a good transition?

                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon icon-expand-collapse" role="img" viewBox="0 0 10 10"
                             aria-labelledby="title desc">
                            <title>Expand and collapse content</title>
                            <desc>An arrow that points down when collapsed and points up when expanded.</desc>
                            <polygon role="presentation" points="2.5,4.167 5,6.667 7.5,4.167 6.917,3.583 5,5.5 3.083,3.583"></polygon>
                        </svg>
                    </h2>
                    <div class="article-content">
                        <div>
                            <p>Successful motion design possesses the following characteristics:</p>
                            <div class="col-list">
                                <section class="module-figure-figure col-3 h2-spacing">
                                    <div class="module">
                                        <h2>Motion is quick</h2>
                                        <p>An interaction shouldn't keep the user waiting longer than necessary.
                                        </p>
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 720px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     style="padding-top: 177.777777778%" aria-label="Play video" data-qp-ui-data-id="qp:u">
                                                    <video aria-describedby="what-makes-a-good-transition-figure-caption-0" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01emlGOWRnRkpMOVk/goodtransition-quickdo-v4.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01aHJmMm9aR3JvazQ/goodtransition-quickdo-v4.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="what-makes-a-good-transition-figure-caption-0">
                                                <p class="s-tag-caption do">Do.</p>
                                                <p>Animate quickly so that the user never has to wait for the animation to finish.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 720px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     style="padding-top: 173.611111111%" aria-label="Play video" data-qp-ui-data-id="qp:v">
                                                    <video aria-describedby="what-makes-a-good-transition-figure-caption-1" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01SEVWZVRRbk40ZDA/goodtransition-quickdont-v4.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01bDBVZE5ndzctZW8/goodtransition-quickdont-v4.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="what-makes-a-good-transition-figure-caption-1">
                                                <p class="s-tag-caption dont">Don’t.</p>
                                                <p>Staggering and slowing the movement of many elements can lengthen the duration.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                </section>
                            </div>
                            <div class="col-list">
                                <section class="module-figure-figure col-3 h2-spacing">
                                    <div class="module">
                                        <h2>Motion is clear</h2>
                                        <p>Transitions should be clear, simple, and coherent. They should avoid doing too much at once.
                                        </p>
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 720px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     style="padding-top: 177.777777778%" aria-label="Play video" data-qp-ui-data-id="qp:w">
                                                    <video aria-describedby="what-makes-a-good-transition-figure-caption-2" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01UlJKVG9BVVFuMHM/goodtransition-cleardo-v3.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01NDkzU2FaYlFHMXM/goodtransition-cleardo-v3.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="what-makes-a-good-transition-figure-caption-2">
                                                <p class="s-tag-caption do">Do.</p>
                                                <p>Maintain a clear path into the next view, even while elements are choreographed as a
                                                    group.
                                                </p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 720px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     style="padding-top: 177.777777778%" aria-label="Play video" data-qp-ui-data-id="qp:x">
                                                    <video aria-describedby="what-makes-a-good-transition-figure-caption-3" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01blR4TWJIS3NuNWM/goodtransition-cleardont-v3.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01VzRvLWJDTEE4WXM/goodtransition-cleardont-v3.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="what-makes-a-good-transition-figure-caption-3">
                                                <p class="s-tag-caption dont">Don’t.</p>
                                                <p>Transitions can get confusing when multiple items need to move in different directions
                                                    or cross paths.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                </section>
                            </div>
                            <div class="col-list">
                                <section class="module-figure col-2 h2-spacing">
                                    <div class="module">
                                        <h2>Motion is cohesive</h2>
                                        <p>Material elements are unified by their speed, responsiveness, and intention. Any customizations
                                            to your app's motion experience should be consistent throughout the app.</p>
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 1520px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     style="padding-top: 61.8421052632%" aria-label="Play video" data-qp-ui-data-id="qp:y">
                                                    <video aria-describedby="what-makes-a-good-transition-figure-caption-4" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01WjlzM09rd2Y2WVE/goodtransition-cohesive-v4.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01eG45MUV2blJQTWc/goodtransition-cohesive-v4.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="what-makes-a-good-transition-figure-caption-4">
                                                <p>While these apps have different functions, their similar animation experiences make them
                                                    feel related.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="material-motion-implications-of-motion" class="article qp-ui" data-qp-ui="{ 'ScrollSpy': {} }" data-qp-ui-data-id="qp:4">
                    <h2 class="article-title qp-ui" data-qp-ui="{ 'ResponsiveZippy': {} }" data-qp-ui-data-id="qp:4">
                        Implications of motion

                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon icon-expand-collapse" role="img" viewBox="0 0 10 10"
                             aria-labelledby="title desc">
                            <title>Expand and collapse content</title>
                            <desc>An arrow that points down when collapsed and points up when expanded.</desc>
                            <polygon role="presentation" points="2.5,4.167 5,6.667 7.5,4.167 6.917,3.583 5,5.5 3.083,3.583"></polygon>
                        </svg>
                    </h2>
                    <div class="article-content">
                        <div>
                            <div class="col-list">
                                <section class="module-figure-figure col-3">
                                    <div class="module">
                                        <p>The benefits of these motion patterns are observable in the following two examples, in which
                                            an app that follows these patterns is compared with an app that does not.</p>
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 720px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     style="padding-top: 173.611111111%" aria-label="Play video" data-qp-ui-data-id="qp:z">
                                                    <video aria-describedby="implications-of-motion-figure-caption-0" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01MU04ZGg3WjB1MXM/implicationsdo-v2.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01Um1wdzhBR1ZuYVE/implicationsdo-v2.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="implications-of-motion-figure-caption-0">
                                                <p class="s-tag-caption do">Do.</p>
                                                <p>During the transition, the user is guided to the next view. The surface transforms to
                                                    communicate hierarchy. Loading occurs behind the scenes to reduce perceived latency.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="figure">
                                        <figure class="s-tag-media">
                                            <div class="media" style="max-width: 720px">
                                                <div class="qp-ui frame qp-ui-video-player qp-ui-video-player-mouse" data-qp-ui="{ 'VideoPlayer': {} }" role="button"
                                                     style="padding-top: 173.611111111%" aria-label="Play video" data-qp-ui-data-id="qp:10">
                                                    <video aria-describedby="implications-of-motion-figure-caption-1" loop="" preload="auto" tabindex="0">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01N0xBbXNTVGtrM2c/implicationsdont-v2.webm" type="video/webm">
                                                        <source src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B14F_FSUCc01anJjQkt4QS1GRzQ/implicationsdont-v2.mp4" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <figcaption id="implications-of-motion-figure-caption-1">
                                                <p class="s-tag-caption dont">Don’t.</p>
                                                <p>It is unclear how the new view is related to the old because no transition occurs and
                                                    there isn’t a clear focal point. Any sense of hierarchy isn’t communicated, and loading
                                                    is more apparent by the display of a circular spinner.</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>

                <div>

                </div>

            </div>
        </div>
    </section>
</div>

<footer>
    <div class="footer-grid">

        <div class="footer-L section-material-design color-cyan">&nbsp;</div>
        <div class="footer-grid-L section-material-design color-cyan">

            <a class="footer-text" href="../material-design/whats-new.html">
                <i class="material-icons arrow-L" aria-hidden="true">arrow_back</i>
                <span class="direction">Previous</span><span class="screen-reader">:</span>
                <div>
                    What’s new
                </div>
            </a>

        </div>

        <div class="footer-R section-what-is-material color-purple">&nbsp;</div>
        <div class="footer-grid-R section-what-is-material color-purple">

            <a class="footer-text" href="../motion/duration-easing.html">
                <i class="material-icons arrow-R" aria-hidden="true">arrow_forward</i>
                <span class="direction">Next</span><span class="screen-reader">:</span>
                <div>
                    Duration &amp; easing
                </div>
            </a>

        </div>

    </div>
</footer>

<script src="../static/default/js/main.min.js"></script>
<script src="//www.gstatic.com/feedback/api.js"></script>

<div class="qp-ui-mask-modal"></div>
</body>

</html>